<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新东方顶部菜单导航</title>
		<style type="text/css">
			#daohang{
				width: 650px;
				height: 35px;
				border: 1px dotted #CBCAC6;
				background-color: #EFEEEC;
			}
			#daohang #tu{
				float: left;
				margin: 5px 50px 5px 5px;
				
			}
			
		.shuxian{
			float: left;
			width: 80px;
			height: 20px;
			border-right:1px solid #D3D3D3 ;
			margin-top: -10px;
			text-align: center;
			
		}
		li{
				float: left;
				list-style: none;
				color: #878787;
				
			}
			#jiantou{
				float: left;
				position: relative;
				left: 1px;
				top: -7px;
			}
			#shuxian1{
				border-right:0px ;
			}
			#xiala{
				position: absolute;
				left: 350px;
				top: 35px;
				display: none;
				width: 280px;
				height: 240px;
				border: 1px solid #878787;
				background-color:white;
				/*margin: 50px;*/
			}
			#xiala1{
				width: 250px;
				height: 60px;
				border-bottom: 1px solid #878787;
				box-sizing: border-box;
				margin: 15px;
				
			}
			#xiala1 li{
				padding: 2px 4px;
			}
			#xiala2{
				width: 250px;
				height: 90px;
				border-bottom: 1px solid #878787;
				box-sizing: border-box;
				margin: 15px;
			}
			#xiala2 li{
				padding: 2px 4px;
			}
			#xiala3{
				width: 250px;
				height: 60px;
				box-sizing: border-box;
				margin: 15px;
			}
			#xiala3 li{
				padding: 2px 4px;
			}
			ul li:hover #xiala{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="daohang">
			<img src="/web/818zuoye/img/logo.gif" id="tu" />
			<ul>
				<li><div class="shuxian">购物车</div></li>

				<li><div class="shuxian">优惠券</div></li>

				<li><div class="shuxian">快速注卡</div></li>

				<li><div class="shuxian">各地购课</div></li>

				<li><div class="shuxian">手机报</div></li>

				<li><div class="shuxian" id="shuxian1">网站导航
					<div id="xiala">
			<div id="xiala1">
				<ul>
					<li>托福</li>
					<li>雅思</li>
					<li>考研</li>
					<li>职称英语</li>
					<li>初中</li>
					<li>日语</li>
				</ul>
			</div>
			<div id="xiala2">
				<ul>
					<li>托福</li>
					<li>雅思</li>
					<li>考研</li>
					<li>职称英语</li>
					<li>初中</li>
					<li>日语</li>
					<li>职称英语</li>
					<li>初中</li>
					<li>日语</li>
				</ul>
			</div>
			<div id="xiala3">
				<ul>
					<li>托福</li>
					<li>雅思</li>
					<li>考研</li>
					
				</ul>
			</div>
				</div></li>
			</ul>
			<img src="/web/818zuoye/img/open_icon.gif" id="jiantou" />
		</div>
		
		
		
	</body>
</html>
